🀢

使用路径和坐标

路径，简单来说就是一系列的点以及连接这些点的线。任何 canvas 上下文只会有一个"当前路径"。

绘制线条最基本的路径操作由反复调用 moveTo() 和 lineTo() 命令组成。

绘制直线

绘制直线可以调用 3 个方法： moveTo 、 lineTo 和 stroke 。

moveTo 方法用于建立新的子路径，并规定其起始点为（ x,y ）。

lineTo 方法用于从 moveTo 方法规定的起始点开始绘制一条到规定坐标的直线，如果前面没有用 moveTo 方法规定子路径的起始点，则 lineTo 方法等同于 moveTo 方法。

stroke 方法用于沿开始、结束绘制一条直线。

✂️

var c = document.getElementById("myCanvas"); // 获取 canvas
对象 var ctx = c.getContext("2d"); //
获取上下文对象 ctx.beginPath();ctx.moveTo(120,
120);
ctx.lineTo(150, 120);
ctx.stroke();ctx.moveTo(140, 100);ctx.lineTo(120,
150);ctx.stroke();ctx.moveTo(135,
120);ctx.lineTo(160, 150);
ctx.stroke();

绘制矩形

使用 canvas 元素绘图时候，有两种方式：填充（ fill ）和绘制边框（ stroke ）。填充是指填满图形内部绘制边框是指不填满图形内部，只绘制图形外框。

绘图的基本步骤就是：

先要设定好绘图的样式（ style ），默认填充和描边都是黑色
调用有关方法进行图形的绘制

绘制矩形时有 3 个常用的方法： fillRect() 方法、 strokeRect() 方法和 clearRect() 方法。

✂️

context.fillRect(x, y, width, height); // 绘制矩形，以当前的 fillStyle 来填充
context.strokeRect(x, y, width, height); // 绘制矩形，以当前的 strokeStyle来填充
context.clearRect(x, y, width, height); // 清除指定区域的像素

fillRect() 方法、 strokeRect() 方法和 clearRect() 方法的参数完全相同，前两个参数 x 和 y 分别表示绘制矩形时的起点横坐标和纵坐标；后两个参数分别表示要绘制矩形的宽度和高度。

✂️

var canvas = document.getElementById('canvas');
if (canvas == null) return false;
if (canvas.getContext) {
  // 浏览器支持 canvas 元素
  var context = canvas.getContext('2d');
  context.fillStyle = '#EEEEFF'; // 设置填充颜色
  context.fillRect(0, 0, 300, 100); // 绘制一个矩形
  context.fillStyle = '#ffb244'; // 绘制填充颜色
  context.strokeStyle = '#bb1508'; // 绘制边框颜色
  context.lineWidth = 10; // 指定边框宽度

  context.fillRect(40, 20, 220, 60); // 设置填充矩形
  context.strokeRect(40, 20, 220, 60);
  context.clearRect(100, 35, 30, 30);
  // 清除指定的区域
  context.fillStyle = 'lightblue';
  context.fillRect(100, 35, 30, 30);
}

绘制三角形

✂️

var c = document.getElementById('l_6');
var context = c.getContext('2d');
context.fillStyle = '#ffff00';

context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.fill();

✂️

var c = document.getElementById('l_5');
var context = c.getContext('2d');
context.strokeStyle = '#00ff66';

context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.closePath();
context.stroke();

✂️

var c = document.getElementById('myCanvas'); // 获取 canvas 对象
var ctx = c.getContext('2d'); // 获取上下文对象
ctx.beginPath();
ctx.moveTo(120, 120);
ctx.lineTo(150, 120);
ctx.lineTo(150, 135);
ctx.lineTo(120, 135);
ctx.lineTo(120, 150);
ctx.lineTo(120, 150);
ctx.lineTo(150, 150);
ctx.lineTo(150, 180);
ctx.lineTo(135, 175);
// ctx.stroke();
ctx.moveTo(165, 120);
ctx.lineTo(165, 180);
ctx.lineTo(175, 175);
// ctx.stroke();
ctx.moveTo(152, 142);
ctx.lineTo(192, 142);
ctx.stroke();
ctx.moveTo(165, 142);
ctx.lineTo(180, 127);
// ctx.stroke();
ctx.moveTo(165, 142);
ctx.lineTo(170, 157);
// ctx.arcTo(170, 180, 180, 180, 26);
ctx.quadraticCurveTo(180, 175, 190, 174);
// ctx.closePath();
ctx.stroke();
var canvas = document.getElementById('canvas1'); // 获取 canvas 对象
var ctx = canvas.getContext('2d'); // 获取上下文对象
var width = canvas.width; // 获取 canvas 元素的宽度
var height = canvas.height; // 获取 canvas 元素的高度
ctx.beginPath(); // 开始绘制路径
ctx.moveTo(0, 0); // 当前光标
ctx.lineTo(width, 0);
ctx.lineTo(width, height);
ctx.lineTo(0, height);
ctx.lineTo(0, 0);
ctx.lineWidth = 3; // 直线的粗细程度
ctx.lineCap = 'round';
ctx.stroke();
canvas.onclick = function (event) {
  ctx.moveTo(event.pageX, event.pageY);
  ctx.lineTo(0, 0);
  ctx.stroke();
};
function Draw() {
  var canvas = document.getElementById('canvas2');
  // if (canvas == null) return false;
  var context = canvas.getContext('2d');
  context.fillStyle = '#EEEEFF'; // 设置填充颜色
  context.fillRect(0, 0, 300, 100); // 绘制一个矩形
  context.fillStyle = '#ffb244'; // 绘制填充颜色
  context.strokeStyle = '#bb1508'; // 绘制边框颜色
  context.lineWidth = 10; // 指定边框宽度
  context.fillRect(40, 20, 220, 60); // 设置填充矩形
  context.strokeRect(40, 20, 220, 60);
  context.clearRect(100, 35, 30, 30); // 清除指定的区域
  context.fillStyle = 'lightblue';
  context.fillRect(100, 35, 30, 30);
}
Draw();
var c = document.getElementById('l_6');
var context = c.getContext('2d');
context.fillStyle = '#ffff00';
context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.fill();
var c = document.getElementById('l_5');
var context = c.getContext('2d');
context.strokeStyle = '#00ff66';
context.beginPath();
context.moveTo(25, 25);
context.lineTo(150, 25);
context.lineTo(25, 150);
context.closePath();
context.stroke();